<template>
	<view class="config_page" :style="{ 'background-image': 'url(' + pageBg + ')' }">
		<template v-for="(item, index) of templateList">
			<view class="com_item" v-if="isShow(item.parameter.showComponent, item.parameter.showVal)" :key="index"
				:style="{
					'z-index':index + 1,
					margin: (item.parameter.marginTop || 0) * 2 + 'rpx ' + (item.parameter.marginLR || 0) * 2 + 'rpx ' + ' 0rpx',
					background: item.parameter.bgColor || 'transparent',
					padding: (item.parameter.padTop || 0) * 2 + 'rpx' + ' ' + (item.parameter.padLR || 0) * 2 + 'rpx ' + (item.parameter.padBot || 0) * 2 + 'rpx',
					'border-radius':
						(item.parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(item.parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(item.parameter.radiusBot || 0) * 2 +
						'rpx ' +
						(item.parameter.radiusBot || 0) * 2 +
						'rpx',
					overflow: item.code != 'userInfo' && item.code !== 'listCategory' ? 'hidden' : ''
				}">
				<component :templateItem="item" is="search-link" v-if="item.code == 'searchLink'" @relationSearch="relationSearch"></component>
				<component :templateItem="item" is="banner" v-else-if="item.code == 'banner'"></component>
				<component :templateItem="item" is="bonusList" v-else-if="item.code == 'bonusList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="brandList" v-else-if="item.code == 'brandList'"></component>
				<component :templateItem="item" is="tabLink" v-else-if="item.code == 'tabLink'"></component>
				<component :templateItem="item" is="configTitle" v-else-if="item.code == 'configTitle'"></component>
				<component :templateItem="item" is="menu-box" v-else-if="item.code == 'menuBox'"></component>
				<component :templateItem="item" is="moduleItems" v-else-if="item.code == 'moduleItems'"></component>
				<component :templateItem="item" is="groupWork" v-else-if="item.code == 'groupWork'"></component>
				<component :templateItem="item" is="seckill" v-else-if="item.code == 'seckill'"></component>
				<component :templateItem="item" is="horseLamp" v-else-if="item.code == 'horseLamp'"></component>
				<component :templateItem="item" is="listCategory" v-else-if="item.code == 'listCategory'" @relationSearch="relationSearch"></component>
				<component :templateItem="item" is="lineList" v-else-if="item.code == 'lineList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="vipProdList" v-else-if="item.code == 'vipProdList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="prodList" v-else-if="item.code == 'prodList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="liveList" v-else-if="item.code == 'liveList'"></component>
				<component :templateItem="item" is="shopList" v-else-if="item.code == 'shopList'"></component>
				<component :templateItem="item" is="videoList" v-else-if="item.code == 'videoList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="couponPackage" v-else-if="item.code == 'couponPackage'"></component>
				<component :templateItem="item" is="infomationList" v-else-if="item.code == 'infomationList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="integralList" v-else-if="item.code == 'integralList'"></component>
				<component :templateItem="item" is="prodFlow" v-else-if="item.code == 'prodFlow'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="articleLibrary" v-else-if="item.code == 'articleLibrary'"></component>
				<component :templateItem="item" is="foodList" v-else-if="item.code == 'foodList'" :ref="item.parameter.id"></component>
				<component :templateItem="item" is="freeModule" v-else-if="item.code == 'freeModule'"></component>
				<component :templateItem="item" is="setMeal" v-else-if="item.code == 'setMeal'"></component>
				<component :templateItem="item" is="meetList" v-else-if="item.code == 'meetList'"></component>
				<component :templateItem="item" is="videoAdvertise" v-else-if="item.code == 'videoAdvertise'"></component>
				<component :templateItem="item" is="pickUp" v-else-if="item.code == 'pickUp'"></component>
				<component :templateItem="item" is="auctionList" v-else-if="item.code == 'auctionList'"></component>
				<component :templateItem="item" is="aboutus" v-else-if="item.code == 'aboutus'"></component>
				<component :templateItem="item" is="voteList" v-else-if="item.code == 'voteList'"></component>
				<component :templateItem="item" is="topicTab" v-else-if="item.code == 'topicTab'" @changTopic="changTopic"></component>
			</view>
		</template>
		<view class="occupy" v-if="showOccupy"></view>
	</view>
</template>

<script>
	import aboutus from '@/template/aboutus.vue';
	import banner from '@/template/banner.vue';
	import brandList from '@/template/brandList.vue';
	import bonusList from '@/template/bonusList.vue';
	import searchLink from '@/template/searchLink.vue';
	import menuBox from '@/template/menuBox.vue';
	import configTitle from '@/template/configTitle.vue';
	import moduleItems from '@/template/moduleItems.vue';
	import groupWork from '@/template/groupWork.vue';
	import seckill from '@/template/seckill.vue';
	import tabLink from '@/template/tabLink.vue';
	import horseLamp from '@/template/horseLamp.vue';
	import listCategory from '@/template/listCategory.vue';
	import lineList from '@/template/lineList.vue';
	import vipProdList from '@/template/vipProdList.vue';
	import prodList from '@/template/prodList.vue';
	import liveList from '@/template/liveList.vue';
	import videoList from '@/template/videoList.vue';
	import couponPackage from '@/template/couponPackage.vue';
	import infomationList from '@/template/infomationList.vue';
	import integralList from '@/template/integralList.vue';
	import prodFlow from '@/template/prodFlow.vue';
	import articleLibrary from '@/template/articleLibrary.vue';
	import foodList from '@/template/foodList.vue';
	import shopList from '@/template/shopList.vue';
	import freeModule from '@/template/freeModule.vue';
	import setMeal from '@/template/setMeal.vue';
	import auctionList from '@/template/auctionList.vue';
	import videoAdvertise from '@/template/videoAdvertise.vue';
	import pickUp from '@/template/pickUp.vue';
	import meetList from '@/template/meetList.vue';
	import topicTab from '@/template/topicTab.vue';
	import voteList from '@/template/voteList.vue';
	import {
		resPost
	} from '@/common/http.request.js';
	import {
		mapState
	} from 'vuex';
	import {
		unigetLocation
	} from '@/utils/uniPromise.js';
	export default {
		props: {
			pageId: {
				type: Number,
				default: null
			},
			autoInit: {
				type: Boolean,
				default: true
			}, // 是否初始化自动加载
		},
		data() {
			return {
				showOccupy: true,
				pageBg: '',
				templateList: [],
				scrollTop: 0,
				temArr: [{
						apiparams: '',
						apiurl: '',
						code: 'searchLink',
						dispose_apiparams: '[]',
						dispose_id: 3621,
						dispose_pagedata: '[]',
						dispose_parameter: '{"bgColor":"#F34D4E","signColor":"#fff","linkType":["product","store","user","storeGoods","course","cont"],"marginTop":0,"marginLR":0,"padLR":0,"padTop":0,"padBot":0,"radiusTop":0,"radiusBot":0,"id":"searchLink_0"}',
						name: '搜索框',
						pk_id: 2
					},
					{
						apiparams: '',
						apiurl: '',
						code: 'tabLink',
						dispose_apiparams: '[]',
						dispose_id: 3622,
						dispose_pagedata: '[{"title":"首页","image":"","linkUrl":""},{"title":"贵妇专用","image":"","linkUrl":"","value":236,"level":1},{"title":"家用电器","image":"","linkUrl":"","value":146,"level":1},{"title":"酒水饮料","image":"","linkUrl":"","value":165,"level":1},{"title":"牛奶饮品","image":"","linkUrl":"","value":164,"level":1},{"title":"牛奶饮品","image":"","linkUrl":"","value":164,"level":1},{"title":"日用百货","image":"","linkUrl":"","value":162,"level":1},{"title":"冻品速食","image":"","linkUrl":"","value":161,"level":1},{"title":"休闲零食","image":"","linkUrl":"","value":160,"level":1},{"title":"养生食品","image":"","linkUrl":"","value":159,"level":1},{"title":"酒水专区","image":"","linkUrl":"","value":158,"level":1},{"title":"今日必抢","image":"","linkUrl":"","value":157,"level":1},{"title":"粮油干货","image":"","linkUrl":"","value":156,"level":1},{"title":"吹风筒","image":"","linkUrl":"","value":204,"level":2},{"title":"时令水果","image":"","linkUrl":"","value":155,"level":1},{"title":"瓜果蔬菜","image":"","linkUrl":"","value":154,"level":1}]',
						dispose_parameter: '{"marginTop":0,"marginLR":0,"padLR":0,"padTop":0,"padBot":0,"radiusTop":0,"radiusBot":0,"bgColor":"#F34D4E","id":"tabLink_1","inctiveColor":"#fff"}',
						name: '产品列表跳转',
						pk_id: 17
					},
					{
						apiparams: '',
						apiurl: '',
						code: 'moduleItems',
						dispose_apiparams: '[]',
						dispose_id: 3623,
						dispose_pagedata: '[{"title":"","image":"http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202104/jhstest/47175002398010.png","linkUrl":""}]',
						dispose_parameter: '{"columns":1,"itemHeight":86,"showTitle":1,"borderPx":0,"imgRadius":0,"marginTop":0,"marginLR":0,"padLR":0,"padTop":0,"padBot":0,"radiusTop":0,"radiusBot":0,"id":"moduleItems_2","bgColor":"#FFFFFF"}',
						name: '广告图',
						pk_id: 13
					},
					{
						apiparams: '',
						apiurl: '',
						code: 'moduleItems',
						dispose_apiparams: '[]',
						dispose_id: 3624,
						dispose_pagedata: '[{"title":"","image":"","linkUrl":""}]',
						dispose_parameter: '{"columns":1,"itemHeight":74,"showTitle":1,"borderPx":0,"imgRadius":0,"marginTop":0,"marginLR":0,"padLR":0,"padTop":0,"padBot":0,"radiusTop":0,"radiusBot":0,"bgColor":"#FFFFFF","id":"moduleItems_3"}',
						name: '广告图',
						pk_id: 13
					},
					{
						apiparams: '[{ "title":"类型", "name":"type",↵"inputType":"radio","options":[{"label":"酒店轮播图", "value":"9" }],"value":"9"}]',
						apiurl: 'GetCommonPicList',
						code: 'banner',
						dispose_apiparams: '[{"title":"类型","name":"type","inputType":"radio","options":[{"label":"酒店轮播图","value":"9"}],"value":"9"}]',
						dispose_id: 3625,
						dispose_pagedata: '[]',
						dispose_parameter: '{"height":150,"interval":3000,"imgRadius":10,"marginTop":-160,"marginLR":15,"padLR":0,"padTop":0,"padBot":10,"radiusTop":0,"radiusBot":0,"bgColor":null,"id":"banner_4","autoPlay":false}',
						name: '首页轮播图',
						pk_id: 1
					}
				]
			};
		},
		computed: {
			...mapState(['vuex_system']),
			isShow(type, val) {
				return function(type, val) {
					if (type == 1) {
						if (val) {
							let bol = val.split(',').some(item => {
								return item == this.vuex_user.level;
							});
							return bol;
						} else {
							return false;
						}
					} else {
						return true;
					}
				};
			}
		},
		components: {
			aboutus,
			banner,
			bonusList,
			brandList,
			searchLink,
			menuBox,
			configTitle,
			moduleItems,
			groupWork,
			seckill,
			tabLink,
			horseLamp,
			listCategory,
			lineList,
			vipProdList,
			prodList,
			liveList,
			videoList,
			couponPackage,
			infomationList,
			integralList,
			prodFlow,
			articleLibrary,
			foodList,
			freeModule,
			auctionList,
			videoAdvertise,
			pickUp,
			meetList,
			topicTab,
			shopList,
			voteList,
			setMeal
		},
		mounted() {
			if (!this.autoInit) {
				return
			}
			if (this.pageId) {
				this.initTwoPage();
			} else {
				this.initTemplateList();
			}
		},
		methods: {
			// 手动初始化
			manualInit() {
				if (this.pageId && !this.templateList[0]) {
					this.initTwoPage();
				}
			},
			initTemplateList() {
				this.$loading();
				if (!this.vuex_business.pk_id) {
					setTimeout(() => {
						this.initTemplateList();
					}, 300);
					return;
				}
				resPost('GetAssemblyDispose', {
						type: 1,
						role_id: this.vuex_business.role_id
					})
					.then(({
						data
					}) => {
						let modules = data[0] ? data : this.temArr;
						if (modules[0].code === 'navBar') {
							let navObj = JSON.parse(modules[0].dispose_parameter || '{}');
							this.pageBg = navObj.pageBgImg || '';
							this.$emit('changNav', {
								bgColor: navObj.bgColor,
								fColor: navObj.fColor,
								contact: navObj.contact == 2 ? false : true,
								hasTop: navObj.hasTop == 2 ? false : true,
							});
							modules.splice(1, 0);
							if (navObj.openLocation == 1) {
								unigetLocation()
									.then(() => {
										this.handTemplateList(modules);
									})
									.catch(() => {
										this.handTemplateList(modules);
									});
							} else {
								this.handTemplateList(modules);
							}
						} else {
							this.pageBg = '';
							this.$emit('changNav', {
								bgColor: ''
							});
							this.handTemplateList(modules);
						}
					})
					.catch(() => {
						this.$hide();
					});
			},
			handTemplateList(modules) {
				this.templateList = modules.map(item => {
					let obj = {
						...item
					};
					if (obj.dispose_parameter) {
						try {
							obj.parameter = JSON.parse(obj.dispose_parameter);
						} catch (e) {
							obj.parameter = {};
						}
					} else {
						obj.parameter = {};
					}
					delete obj.dispose_parameter;
					if (obj.dispose_pagedata) {
						try {
							obj.pageData = JSON.parse(obj.dispose_pagedata);
						} catch (e) {
							obj.pageData = [];
						}
					} else {
						obj.pageData = [];
					}
					delete obj.dispose_pagedata;
					if (obj.dispose_apiparams) {
						try {
							obj.apiParams = JSON.parse(obj.dispose_apiparams);
						} catch (e) {
							obj.apiParams = [];
						}
					} else {
						obj.apiParams = [];
					}
					delete obj.dispose_apiparams;
					return obj;
				});
				this.$hide();
				setTimeout(() => {
					this.showOccupy = false
				}, 300)
			},
			initTwoPage() {
				this.$loading();
				if (!this.vuex_business.pk_id) {
					setTimeout(() => {
						this.initTwoPage();
					}, 300);
					return;
				}
				resPost('GetTemplateLibrary', {
					pk_id: this.pageId
				}).then(({
					data
				}) => {
					let modules = JSON.parse(data.val || '[]');
					if (modules[0] && modules[0].code === 'navBar') {
						let navObj = modules[0].parameter || {};
						this.pageBg = navObj.pageBgImg || '';
						this.$emit('changNav', {
							bgColor: navObj.bgColor,
							fColor: navObj.fColor,
							contact: navObj.contact == 2 ? false : true,
							hasTop: navObj.hasTop == 2 ? false : true,
							title: data.name
						});
						modules.splice(1, 0);
						if (navObj.openLocation == 1) {
							unigetLocation()
								.then(() => {
									this.handTwoList(modules);
								})
								.catch(() => {
									this.handTwoList(modules);
								});
						} else {
							this.handTwoList(modules);
						}
					} else {
						this.pageBg = '';
						this.$emit('changNav', {
							bgColor: '',
							title: data.name
						});
						this.handTwoList(modules);
					}
				})
			},
			handTwoList(modules) {
				this.templateList = modules.map(item => {
					item.pageData = item.pagedata;
					item.pagedata = [];
					item.apiParams = item.apiparams;
					item.apiparams = [];
					return item;
				});
				this.$hide();
				setTimeout(() => {
					this.showOccupy = false
				}, 300)
			},
			// 关联搜索
			relationSearch(obj) {
				let id = obj.relation;
				if (this.$refs[id]) {
					this.$refs[id][0].resetSearch(obj.params);
				}
			},
			changTopic(obj) {
				this.showOccupy = false
				this.$emit('changTopic', obj)
			},
			// 父级调用：上拉加载更多
			$onReachBottom() {
				let id = this.templateList[this.templateList.length - 1].parameter.id;
				if (this.$refs[id] && this.$refs[id][0] && this.$refs[id][0].getMoreList) {
					this.$refs[id][0].getMoreList();
				}
			},
			$onPullDownRefresh() {
				this.templateList = [];
				this.$nextTick(() => {
					if (this.pageId) {
						this.initTwoPage();
					} else if (this.autoInit) {
						this.initTemplateList();
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.config_page {
		background-color: $www-theme-bg;
	}

	.occupy {
		min-height: 100vh;
	}

	.com_item {
		position: relative;
	}

	.nav {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.banner-swiper {
		padding: 22rpx 0;
		background-color: #fff;
	}
</style>
